<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {

            width: 500px;
            height: 220px;
            background-color: #00a1cc;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            position: relative;
        }
        #box img {
            display: block;
        }
    </style>
</head>
<body>
<div id="box">
    <div>
        <div style="float: left">
            <img src="image/1.jpg" height="220">
            <img src="image/2.png" height="220">
            <img src="image/3.jpg" height="220">
            <img src="image/4.jpg" height="220">
            <img src="image/5.jpg" height="220">
        </div>
    </div>


</div>

<script>
    var box = document.getElementById('box');
    function marquee(box,dir){
        var findObj = box.children[0].children[0];
        var willInsertObj = box.children[0];
        willInsertObj.appendChild(findObj.cloneNode(true))

        function move(){
            var attrName = 'scrollLeft';

            //条件
            if (dir=='left'){
                var condition = !!(box.scrollLeft >= box.scrollWidth/2);
                var startPosition = 0;
                var step = 1;

            } else if (dir =='right') {
                var condition = !!(box.scrollLeft==0);
                var startPosition = box.scrollWidth/2;
                var step = -1;
            } else if (dir=='down'){
                attrName = 'scrollTop';
                var condition = !!(box['scrollTop'] >= box.scrollHeight/2);
                var startPosition = 0;
                var step = 1;
            }else if (dir=='up'){
                attrName = 'scrollTop';
                var condition = !!(box['scrollTop'] ==0);
                var startPosition = box.scrollHeight/2;
                var step = -1;
            }

            if (condition){
                box[attrName] = startPosition;
            } else {
                box[attrName] =  box[attrName] + step;
            }
        }
        setInterval(move,5);
    }
    marquee(box,'up');




</script>
</body>
</html>